<template>
  <!-- 计划成本-税费抵扣 -->
  <div class="salary blue-border">
    <!-- <div class="top">
      <div @click="toPlanSalary">
        <span>本月计划工资</span>
        <span>￥1425100.00</span>
      </div>
      <div>
        <span>本月基线工资</span>
        <span>￥1425100.00</span>
      </div>
      <div>
        <span>本月工资</span>
        <span>￥1425100.00</span>
      </div>
      <div>
        <span>计划工资差异</span>
        <span>￥1425100.00</span>
      </div>

      <div>
        <span>基线工资差异</span>
        <span>￥1425100.00</span>
      </div>
    </div> -->
    <div class="center">
      <div>
        <div class="title">项目员工工资薪酬</div>
        <lineChart ref="annualSalaryChart" id="annualSalaryChart" width="100%" height="90%"></lineChart>
      </div>
      <div>
        <div class="title">地区收入占比图</div>
        <div id="wageRegionalProportionChart" style="width: 100%; height: 90%"></div>
      </div>
    </div>
    <div class="bottom">
      <tableBox :data="taxesAndFeesData" :show-serial-number="false" :showThead="true" :thead-list="taxesAndFeesThead"
        @toPlanSalary="toPlanSalary" @toInReality="toInReality">
      </tableBox>
    </div>
  </div>
</template>
<script>
import lineChart from './lineChart'
import tableBox from "./table-box.vue";
import * as echarts from 'echarts'
import {
  getFinanceReportBIDownByMonthSalary, getFinanceReportBIDownByMonthSalaryList
} from "@/api/cld/financeReportBINew";
export default {
  components: { tableBox, lineChart },
  data() {
    return {
      taxesAndFeesThead: [],
      taxesAndFeesData: [

      ]
    }

  },
  mounted() {
    // this.getAnnualSalary()
    this.getWageRegionalProportion()
    this.getEmployeeSalary()
    this.getTableData()
  },
  methods: {
    getWageRegionalProportion() {
      let data = [
        { name: '第一城区', value: 100 },
        { name: '庐山城区', value: 200 },
        { name: '河东片区', value: 300 },
      ]
      this.initPieChart(data)
    },
    initPieChart(data) {
      this.chart = echarts.init(document.getElementById('wageRegionalProportionChart'))
      this.chart.setOption({
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          right: 20,
          top: 'center',
        },
        series: [
          {
            type: 'pie',
            label: {
              normal: {
                formatter: '{b}\n{c}'
              }
            },
            tooltip: {
              valueFormatter: function (value) {
                return value
              }
            },
            data: data
          }
        ]
      })
    },
    async getEmployeeSalary() {
      const { data: res } = await getFinanceReportBIDownByMonthSalary();
      let arr = []
      let xAxisData = []
      let series = []
      let legendData = { show: true, data: [] }
      let dataNum = this.getDaysInMonth()
      for (let i = 1; i <= dataNum; i++) {
        xAxisData.push(i)
      }
      let barArr = ['基础工资', '领班津贴', '主管津贴', '经理津贴', '加班费']
      res.forEach(item => {
        legendData.data.push(item.dataName)
        let type = { type: 'line' }
        if (barArr.indexOf(item.dataName) !== -1) {
          type = {
            type: 'bar',
            stack: 'Ad',
          }
        }
        series.push(
          {
            name: item.dataName,
            ...type,
            data: item.dataVal,
          },
        )
      })
      console.log(legendData, xAxisData, series)
      this.$refs.annualSalaryChart.initChart(legendData, xAxisData, series)

    },

    toPlanSalary(key) {
      this.$router.push("/project/profitEstimation/profitEstimation/" + key);
    },
    toInReality(key) {
      this.$router.push("/CldPayDetails/realTime/projectDetails/" + key);
    },
    getDaysInMonth() {
      // 创建当前月的第一天的日期对象
      const today = new Date();
      const currentYear = today.getFullYear();
      const currentMonth = today.getMonth() + 1;

      const nextMonth = new Date();
      nextMonth.setFullYear(currentYear, currentMonth, 1);
      nextMonth.setDate(nextMonth.getDate() - 1);

      return nextMonth.getDate();
    },
    // 获取表格数据
    async getTableData() {
      const { data: res } = await getFinanceReportBIDownByMonthSalaryList();
      let dataNum = this.getDaysInMonth()
      let tHead = [] //表头
      for (let i = 1; i <= dataNum; i++) {
        tHead.push(i)
      }
      this.taxesAndFeesThead = ['日期', ...tHead, '合计']
      let rv = this.formatterArr(res.rvList)
      let rvList = [{ val: '参考值' }, ...rv]
      let pv = this.formatterArr(res.pvList)
      let pvList = [{ val: '计划值' }, ...pv]
      let av = this.formatterArr(res.avList)
      let avList = [{ val: '实际值' }, ...av]

      let overTime = this.formatterArr(res.overTimeList)
      let overTimeList = [{ val: '加班费' }, ...overTime]
      let lbAllowance = this.formatterArr(res.lbAllowanceList)
      let lbAllowanceList = [{ val: '领班津贴', style: "white-space:nowrap" }, ...lbAllowance]
      let jlAllowance = this.formatterArr(res.jlAllowanceList)
      let jlAllowanceList = [{ val: '领班津贴' }, ...jlAllowance]
      let salary = this.formatterArr(res.salaryList)
      let salaryList = [{ val: '基础工资' }, ...salary]
      let zg = this.formatterArr(res.zgAllowanceList)
      let zgList = [{ val: '主管津贴' }, ...zg]
      this.taxesAndFeesData.push(rvList, pvList, avList, salaryList, lbAllowanceList, zgList, jlAllowanceList, overTimeList)
    },
    formatPrice(price) {
      return price.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    },
    formatterArr(arr) {
      let list = []
      arr.forEach(item => {
        list.push({ val: this.formatPrice(item) })
      })
      return list
    }

  }
}
</script>
<style lang="scss" scoped>
@import 'border.css';

.salary {
  width: 100%;
  height: 100%;
  padding: 25px 21px;
  display: flex;
  flex-direction: column;

  .title {
    font-weight: bold;
    font-size: 20px;
    color: #000000;
    text-align: center;
    margin: 0 0 20px;

  }

  .center {
    height: 55%;
    display: flex;
    // border-top: 1px solid #ddd;
    // padding-top: 32px;

    >div:nth-child(1) {
      width: 70%;
    }

    >div:nth-child(2) {
      width: 30%;
    }
  }

  .bottom {
    flex-grow: 1;
    height: 45%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding-top: 32px;
    border-top: 1px solid #ddd;

    >div:nth-child(2) {
      flex-grow: 1;
    }
  }
}
</style>